import React, { Component } from 'react';
import './HCinformation.css'
import { Flex } from 'antd-mobile';
import HCinformation_img from '../../img/title.png'
import * as api from '../../uitls/api'
import cun from '../../uitls/session'
class HCinformation extends Component {
    constructor() {
        super()
        this.state = {
            initdata: '',
            imgUrl: '',
            user_name: '',
            user_pwd: '',
            user_phone: ''
        }
    }
    fanhui = () => {
        this.props.history.push('/Home/MyInfo')
    }
    headPortrait = () => {
        cun.setStorage('gerenuser', this.state.initdata)
        this.props.history.push('/Home/HCmodifyPicture')
    }
    HCModifyNickname = () => {
        this.props.history.push('/Home/HCModifyNickname')
    }
    HCchangePassword = () => {
        this.props.history.push('/Home/HCchangePassword')
    }
    HCModifyPhone = () => {
        this.props.history.push('/Home/HCModifyPhone')
    }
    componentDidMount() {
        console.log(this.props.match.params.userId);
        this.axios({
            url: api.GET_Querymy,
            method: 'get',
            params: {
                user_id: this.props.match.params.userId
            }
        }).then(data => {
            console.log(data);
            if (data.data.code === 200) {
                this.setState({
                    initdata: data.data.data[0],
                    imgUrl: data.data.data[0].img_url,
                    user_name: data.data.data[0].user_name,
                    user_pwd: data.data.data[0].user_pwd,
                    user_phone: data.data.data[0].user_phone
                })
            }
        })
    }
    render() {
        return (
            <div className='HCinformation_box'>
                <Flex style={{ backgroundColor: '#FFD656' }}>
                    <Flex.Item>
                        <div className='HCinformation_title_icon'>
                            <i className="iconfont icon-jiantouarrowhead7" onClick={this.fanhui}></i>
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className="HCinformation_sub-title">我的账号</div>
                    </Flex.Item>
                    <Flex.Item>
                    </Flex.Item>
                </Flex>
                <Flex className='HCinformation_box_box' onClick={this.headPortrait}>
                    <div style={{ width: '50%' }}>
                        <div className='HCinformation_text'>
                            头像
                        </div>
                    </div>
                    <div style={{ width: '40%', textAlign: 'right' }}>
                        <div className='HCinformation_img_img' >
                            <img src={HCinformation_img} alt="" />
                        </div>
                    </div>
                    <div style={{ width: '10%', textAlign: 'right' }}>
                        <i className='iconfont icon-iconfontjiantou5'></i>
                    </div>
                </Flex>
                <Flex className='HCinformation_box_box' onClick={this.HCModifyNickname}>
                    <div style={{ width: '50%' }}>
                        <div className='HCinformation_text'>
                            用户名
                        </div>
                    </div>
                    <div style={{ width: '40%', textAlign: 'right' }}>
                        <div className='HCinformation_text_text'>
                            {this.state.user_name}
                        </div>
                    </div>
                    <div style={{ width: '10%', textAlign: 'right' }}>
                        <i className='iconfont icon-iconfontjiantou5'></i>
                    </div>
                </Flex>
                <Flex className='HCinformation_box_box' onClick={this.HCchangePassword}>
                    <div style={{ width: '50%' }}>
                        <div className='HCinformation_text'>
                            账号密码
                        </div>
                    </div>
                    <div style={{ width: '40%', textAlign: 'right' }}>
                        <div className='HCinformation_text_text'>
                            *******
                        </div>
                    </div>
                    <div style={{ width: '10%', textAlign: 'right' }}>
                        <i className='iconfont icon-iconfontjiantou5'></i>
                    </div>
                </Flex>
                <Flex className='HCinformation_box_box' onClick={this.HCModifyPhone}>
                    <div style={{ width: '50%' }}>
                        <div className='HCinformation_text'>
                            手机号
                        </div>
                    </div>
                    <div style={{ width: '40%', textAlign: 'right' }}>
                        <div className='HCinformation_text_text'>
                            {this.state.user_phone}
                        </div>
                    </div>
                    <div style={{ width: '10%', textAlign: 'right' }}>
                        <i className='iconfont icon-iconfontjiantou5'></i>
                    </div>
                </Flex>
            </div>
        );
    }
}

export default HCinformation;